import React, { useEffect } from 'react';
import { Link, useParams } from 'react-router-dom';
import { Button, Row, Col } from 'reactstrap';
import { Translate } from 'react-jhipster';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { useAppDispatch, useAppSelector } from 'app/config/store';

import { getEntity } from './activity-property.reducer';

export const ActivityPropertyDetail = () => {
  const dispatch = useAppDispatch();

  const { id } = useParams<'id'>();

  useEffect(() => {
    dispatch(getEntity(id));
  }, []);

  const activityPropertyEntity = useAppSelector(state => state.activityProperty.entity);
  return (
    <Row>
      <Col md="8">
        <h2 data-cy="activityPropertyDetailsHeading">
          <Translate contentKey="yonglianManagementApp.activityProperty.detail.title">ActivityProperty</Translate>
        </h2>
        <dl className="jh-entity-details">
          <dt>
            <span id="id">
              <Translate contentKey="global.field.id">ID</Translate>
            </span>
          </dt>
          <dd>{activityPropertyEntity.id}</dd>
          <dt>
            <span id="propertyName">
              <Translate contentKey="yonglianManagementApp.activityProperty.propertyName">Property Name</Translate>
            </span>
          </dt>
          <dd>{activityPropertyEntity.propertyName}</dd>
          <dt>
            <span id="propertyValue">
              <Translate contentKey="yonglianManagementApp.activityProperty.propertyValue">Property Value</Translate>
            </span>
          </dt>
          <dd>{activityPropertyEntity.propertyValue}</dd>
          <dt>
            <span id="propertyRemark">
              <Translate contentKey="yonglianManagementApp.activityProperty.propertyRemark">Property Remark</Translate>
            </span>
          </dt>
          <dd>{activityPropertyEntity.propertyRemark}</dd>
          <dt>
            <span id="propertyType">
              <Translate contentKey="yonglianManagementApp.activityProperty.propertyType">Property Type</Translate>
            </span>
          </dt>
          <dd>{activityPropertyEntity.propertyType}</dd>
          <dt>
            <span id="orderNo">
              <Translate contentKey="yonglianManagementApp.activityProperty.orderNo">Order No</Translate>
            </span>
          </dt>
          <dd>{activityPropertyEntity.orderNo}</dd>
          <dt>
            <Translate contentKey="yonglianManagementApp.activityProperty.activity">Activity</Translate>
          </dt>
          <dd>{activityPropertyEntity.activity ? activityPropertyEntity.activity.id : ''}</dd>
        </dl>
        <Button tag={Link} to="/activity-property" replace color="info" data-cy="entityDetailsBackButton">
          <FontAwesomeIcon icon="arrow-left" />{' '}
          <span className="d-none d-md-inline">
            <Translate contentKey="entity.action.back">Back</Translate>
          </span>
        </Button>
        &nbsp;
        <Button tag={Link} to={`/activity-property/${activityPropertyEntity.id}/edit`} replace color="primary">
          <FontAwesomeIcon icon="pencil-alt" />{' '}
          <span className="d-none d-md-inline">
            <Translate contentKey="entity.action.edit">Edit</Translate>
          </span>
        </Button>
      </Col>
    </Row>
  );
};

export default ActivityPropertyDetail;
